import { queryRuntime } from "@/service/monitor"
import { useRequest } from "ahooks"
import { Line } from '@ant-design/plots';


const date = (d:any)=>{
  const dd = [...d]
  for(let i=0;i<24;i++){
    let k = i<10?`0${i}`:i+''
    if(!dd.find(v=>v.hour==k)){
      dd.push({
        count: 0,
        hour: k
      })
    }
  }

  return dd.sort((a,b)=>a.hour>b.hour?1:-1)
}

const TimeIntervalCard = ()=>{
  const { data = [] } = useRequest(() => queryRuntime({ "source": "timeInterval" }))
  console.log('sss',date(data))
   const config:any = {
    data:date(data),
    padding: 'auto',
    xField: 'hour',
    yField: 'count',
    // seriesField: 'hour',
    meta:{
      count:{
        alias: '数量',
      }
    },
    xAxis: {
      //  type: 'timeCat',
      tickCount: 25,
    },
    smooth: true,
  };

  return <Line {...config} />;
}
export default TimeIntervalCard